<template>
  <div class="manage">
    <div class="manage-header">
      <el-popover
        placement="top-start"
        :width="200"
        trigger="hover"
        content="点击按钮新增客户">
        <template #reference>
          <el-button type="primary" @click="addUser()">+ 新增</el-button>
        </template>
      </el-popover>
      <Form inline :formLabel="formLabel" :form="searchFrom">
        <el-button type="primary" @click="searchUser(searchFrom.keyword)">搜索</el-button>
      </Form>
    </div>
    <!-- 表格 -->
    <Table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @edit="editUser"
      @del="delUser">
    </Table>
    <!-- 弹出表单 -->
    <el-dialog
      :title="operateType === 'add' ? '新增客户' : '更新客户'"
      v-model="isShow">
      <Form :formLabel="operateFormLabel" :form="operateForm" ref="form"></Form>
      <template #footer class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Table from "./Table.vue";
import Form from "./Form.vue";
import http from "../request/index.js";
import { useDataStore } from "../stores/data.js";
var _index;
var count = 10;
export default {
  components: {
    Table,
    Form,
  },
  data() {
    return {
      data: useDataStore(),
      searchs: [],
      tableData: [
        {
          id: "1",
          telephone: "134123456",
          name: "张三",
          manager: "aaa",
          level: 1,
        },
        {
          id: "2",
          telephone: "135123456",
          name: "李四",
          manager: "aaa",
          level: 2,
        },
        {
          id: "3",
          telephone: "137123456",
          name: "王五",
          manager: "bbb",
          level: 2,
        },
        {
          id: "4",
          telephone: "138123456",
          name: "赵六",
          manager: "bbb",
          level: 2,
        },
        {
          id: "5",
          telephone: "138123456",
          name: "田七",
          manager: "bbb",
          level: 1,
        },
        {
          id: "6",
          telephone: "130123456",
          name: "翠花",
          manager: "aaa",
          level: 1,
        },
        {
          id: "7",
          telephone: "139223456",
          name: "铁牛",
          manager: "bbb",
          level: 2,
        },
        {
          id: "8",
          telephone: "139323456",
          name: "阿猫",
          manager: "bbb",
          level: 2,
        },
        {
          id: "9",
          telephone: "139423456",
          name: "阿狗",
          manager: "bbb",
          level: 2,
        },
        {
          id: "10",
          telephone: "139523456",
          name: "阿猪",
          manager: "bbb",
          level: 2,
        },
      ],
      tableLabel: [
        {
          field: "name",
          label: "姓名",
        },
        {
          field: "telephone",
          label: "联系方式",
        },
        {
          field: "level",
          label: "客户级别",
        },
        {
          field: "manager",
          label: "负责人",
        },
      ],
      config: {
        page: 1,
        total: 10, //总记录条数
        limit: 5, //每页几条
        loading: false,
      },
      formLabel: [
        {
          field: "keyword",
          label: "",
        },
      ],
      searchFrom: {
        keyword: "",
      },
      operateType: "add",
      isShow: false,
      operateForm: {
        name: "",
        telephone: "",
        level: "",
        manager: "",
      },
      operateFormLabel: [
        {
          field: "name",
          label: "姓名",
        },
        {
          field: "telephone",
          label: "联系方式",
        },
        {
          field: "level",
          label: "客户级别",
          type: "select",
          opts: [
            {
              label: "1",
              value: 1,
            },
            {
              label: "2",
              value: 2,
            },
          ],
        },
        {
          field: "manager",
          label: "负责人",
          type: "select",
          opts: [
            {
              label: "aaa",
              value: "aaa",
            },
            {
              label: "bbb",
              value: "bbb",
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 删除用户
    async delUser(row) {
      console.log(row);
      try {
        let res = await this.$confirm(
          "此操作将永久删除该记录, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
        console.log("***res=", res);
        // 找到对应的数据，删除
        this.tableData.forEach((item, index) => {
          if (item.id === row.id) {
            this.tableData.splice(index, 1);
            count = count - 1;
            // 修改记录数
            this.config.total = this.config.total - 1;
            // 同步修改共享的数据
            this.data.delUser(row);
          }
        });
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      } catch (error) {
        console.log(error);
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
    },
    // 查找客户
    searchUser(name = "") {
      // console.log(this.searchFrom.keyword);
      name = this.searchFrom.keyword;
      this.tableData.map((item) => {
        if (item.name == name) {
          this.searchs = [];
          this.searchs.push(item);
          console.log(this.searchs);
          this.tableData = this.searchs;
          return;
        }
      });
    },
    // 增加用户
    addUser() {
      this.operateForm = {};
      this.operateType = "add";
      this.isShow = true;
    },
    // 编辑用户
    async editUser(row) {
      console.log(row);
      this.operateType = "edit";
      this.isShow = true;
      // 数据在表单上显示
      this.operateForm = { ...row };
      this.tableData.forEach((item, index) => {
        if (item.id === row.id) {
          _index = index;
        }
      });
    },
    async confirm() {
      // 编辑操作
      if (this.operateType === "edit") {
        var editdata = _index;
        (this.tableData[editdata].name = this.operateForm.name),
          (this.tableData[editdata].telephone = this.operateForm.telephone),
          (this.tableData[editdata].level = this.operateForm.level),
          (this.tableData[editdata].manager = this.operateForm.manager),
          (this.isShow = false);
        this.data.editUser(
          _index,
          this.operateForm.name,
          this.operateForm.telephone,
          this.operateForm.level,
          this.operateForm.manager
        );
      } else {
        // 新增操作
        // 客户数+1
        count = count + 1;
        // 新增一个数据对象
        this.tableData.push({
          id: count.toString(),
          name: this.operateForm.name,
          telephone: this.operateForm.telephone,
          level: this.operateForm.level,
          manager: this.operateForm.manager,
        });
        // 修改pinia的新增用户的数据
        this.data.addUser(
          count,
          this.operateForm.name,
          this.operateForm.telephone,
          this.operateForm.level,
          this.operateForm.manager
        );
        this.config.total = this.config.total + 1;
        console.log(this.tableData);
        this.isShow = false;
        this.$message({
          type: "success",
          message: "添加成功",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.manage {
  height: 90%;
  padding-bottom: 20px;
  overflow: hidden;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
</style>
